<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM事件</title>
  <script>
    window.onload=function(){
      // 获取按钮
      var btn=document.getElementById('btn');
      // DOM0级事件 不可追加事件
      btn.onclick=function(){
        console.log('我是被点击了');
      };
      btn.onclick=function(){
        alert('我被点击了');
      };
      // DOM0解绑事件
      btn.onclick=null;
      // DOM2级事件 追加事件 addEventListener();
      // 参数:事件类型 事件处理程序 布尔值 true-在捕获阶段执行 false-在冒泡阶段执行
      function handler1(){
        alert(1)
      }
      function handler2(){
        console.log(2);
      }
      btn.addEventListener('click',handler1,false);
      btn.addEventListener('click',handler2,false);
      // 对DOM2级事件进行解绑
      // removeEventListener 参数：事件类型 事件处理程序(具名函数)
      btn.removeEventListener('click',handler1);
      btn.removeEventListener('click',handler2);
    }
  </script>
</head>
<body>
  <button id="btn">点击我</button>
</body>
</html>